<template>
	<view>
		<form @submit="formSubmit" @reset="formReset" >
			<view class="uni-form-item uni-column">
				<input class="uni-input" name = "source" focus placeholder="请输入数据名称" />
				<input class="uni-input" name = "value" type="number" placeholder="请输入数据数值" />
				<view class="uni-form-item uni-row">
					<button type="primary" form-type="submit">新增</button>
					<button type="default" form-type="reset">删除</button>
				</view>
			</view>
		</form>
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" refresher-background = "#00ff7f" >
			<text class="text" user-select = "true">{{text}}</text>
		</scroll-view>
		<view>
		    <uni-ec-canvas class="uni-ec-canvas" id="bar-chart"
		      canvas-id="multi-charts-line" :ec="ec"></uni-ec-canvas>
		
		    <uni-ec-canvas class="uni-ec-canvas" id="pie-chart"
		      canvas-id="multi-charts-pie":ec="ec2"></uni-ec-canvas>
		</view>
	</view>
</template>

<script>
	
	import uniEcCanvas from '@/components/uni-ec-canvas.vue';
	export default {
	    data() {
	        return {
	            text: '',
	            canAdd: true,
	            canRemove: false,
	            source: [],
				value: [],
				op:[],
				show: [],
				ec: {
					option : {
						title: {
						    text: "柱状图",
						    subtext: "Bar",
						    left: "center",
						    top: "top",
						    textStyle: {
						      fontSize: 20
						    },
						    subtextStyle: {
						      fontSize: 10
						    }
						  },
						 tooltip: {
						         trigger: 'axis'
						  },
					    xAxis: {
					        type: 'category',
					        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					    },
					    yAxis: {
					        type: 'value'
					    },
					    series: [{
					        data: [120, 200, 150, 80, 70, 110, 130],
					        type: 'bar',
					        showBackground: true,
					        backgroundStyle: {
					            color: 'rgba(180, 180, 180, 0.2)'
					        }
					    }]
					},
				},
				ec2 :{
					option : {
						title: {
						    text: "饼图",
						    left: "center",
						    top: "top",
						    textStyle: {
						      fontSize: 20
						    }
						  },
					    tooltip: {
					            trigger: 'axis'
					     },
					    legend: {
							data: this.source1,
					        top: '5%',
					        left: 'center'
					    },
					    series: [
					        {
					            name: 'Pie',
					            type: 'pie',
					            radius: ['40%', '70%'],
					            avoidLabelOverlap: false,
					            label: {
					                show: true,
					                position: 'top'
					            },
					            emphasis: {
					                label: {
					                    show: true,
					                    fontSize: '40',
					                    fontWeight: 'bold'
					                }
					            },
					            labelLine: {
					                show: true
					            },
					            data: [
									{value: 1048, name: '搜索引擎'},
									{value: 735, name: '直接访问'},
									{value: 580, name: '邮件营销'},
									{value: 484, name: '联盟广告'},
									{value: 300, name: '视频广告'}
								]
					        }
					    ]
					},
				},
				
	        }
	    },
		components: {
		   uniEcCanvas
		},
		//mounted(){
		//	this.draw()
		//	this.draw1()
		//},
	    methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			formSubmit: function(e) {
				if(e.detail.value.source.length==0||e.detail.value.value.length==0){
					console.log('请完整输入' + JSON.stringify(e.detail.value))
					uni.showModal({
					    content: '输入信息不完整',
					    showCancel: true
					});
				}
				else{
					console.log('数据发送成功，发送数据为：' + JSON.stringify(e.detail.value))
					var formd = e.detail.value
					var source = formd.source
					var value = formd.value
					this.source.push(source)
					this.value.push(value)
					this.op.push({'value':value,'name':source})
					this.show.push('name'+':'+source+' , '+'value'+':'+value)
					this.source1 = JSON.parse(JSON.stringify(this.source))
					this.value1 = JSON.parse(JSON.stringify(this.value))
					this.op1 = JSON.parse(JSON.stringify(this.op))
					this.text = this.show.join('\n');
					console.log(this.op1)
					console.log(this.show)
					this.inited()
					}
			},
			formReset: function(e) {
				if (this.op.length > 0) {
					this.op.pop();
					this.source.pop();
					this.value.pop();
					this.op1.pop();
					this.source1.pop();
					this.value1.pop();
					this.show.pop()
					this.text = this.show.join('\n');
					this.canAdd = this.show.length < 12;
					this.canRemove = this.show.length > 0;
					this.inited()
				}
            },
			inited: function(){
				this.ec.option.xAxis.data = this.source1;
				this.ec.option.series[0].data = this.value1;
				this.ec2.option.series[0].data = this.op1;
		    }
		}
	}
</script>

<style scoped>
	/* 表单 */
	.uni-form-item{
		display:flex;
		width:100%;
		padding:10rpx 0;
		text-align: center;
		box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
	}
	.uni-column {
		flex-direction: column;
	}
	.uni-row {
		flex-direction: row;
	}
	.uni-input {
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height:50rpx;
		font-size:28rpx;
		background:#FFF;
		flex: 1;
		border-bottom-style:solid;
		border-color:#00ecec;
	}
	.text{
		display:flex;
		width:auto;
		text-align: left;
		height: 80px;
	}
	.uni-ec-canvas {
		border-top-style:solid;
		border-color:#ffff00;
	  width: 100%;
	  height: 500px;
	  display: block;
	}
</style>